import React from "react";
import PropTypes from "prop-types";
import BrandItem from "component/BrandItem/index.jsx";

import { Col, Row, Spin } from "antd";

import "./index.scss";
// Default Brand img
import DefaultBrandImg from "../../../images/brand_img_400x140.png"

class BrandPage extends React.Component {

  render() {
    const { classes, current_brand_id, current_cls_id, is_brands_loading } = this.props;
    const { handle_brand_change } = this.props;

    // avoid case : rendering when data streaming.
    if (current_cls_id === undefined) {
      return <div>DEV DEBUG</div>
    }
    // == Prod Erase

    const class_ = classes.find(cls => cls.id === current_cls_id);
    const { brands } = class_;

    return (
      <div className="brands_container">
        
        <Spin spinning={is_brands_loading} size="large">
          {brands.map(brand => <BrandItem
            key={brand.id}
            id={brand.id}
            name={brand.name}
            logo_src={brand.logo_src || DefaultBrandImg}
            onClick={handle_brand_change}
          />)}
        </Spin>
      </div>
    )
  }
}

BrandPage.propTypes = {
  current_cls_id: PropTypes.number,
  current_brand_id: PropTypes.number,
  classes: PropTypes.arrayOf(PropTypes.object),    // Not structure meet.
  handle_brand_change: PropTypes.func,

  is_brands_loading: PropTypes.bool
}



export default BrandPage;